<template>
  <div>
    <el-form class="mt10" :rules="rules" :model="resetForm">
      <el-form-item prop="username">
        <el-input
          ref="username"
          v-model="resetForm.username"
          placeholder="手机号"
          name="username"
          type="text"
          tabindex="1"
        />
      </el-form-item>
      <el-form-item prop="validate">
        <el-input
          ref="username"
          v-model="resetForm.validate"
          placeholder="验证码"
          name="username"
          type="text"
          tabindex="1"
        />
        <el-link type="info" :underline="false" class="sms-code">获取验证码</el-link>
      </el-form-item>
      <el-form-item prop="password">
        <el-input
          ref="username"
          v-model="resetForm.password"
          placeholder="新密码"
          name="username"
          type="text"
          tabindex="1"
        />
      </el-form-item>
      <el-button style="width: 100%" type="primary">重置</el-button>
    </el-form>
    <p class="mt20">
      <el-link type="primary" @click="back">返回登录</el-link>
    </p>
  </div>
</template>
<script>
export default {
  data () {
    return {
      rules: {
        username: [
          { required: true, trigger: 'blur', message: '请输入手机号' }
        ],
        validate: [
          { required: true, trigger: 'blur', message: '请输入验证码' }
        ],
        password: [
          { required: true, trigger: 'blur', message: '请输入新密码' }
        ]
      },
      resetForm: {
        username: '',
        validate: ''
      }
    }
  },
  methods: {
    back () {
      this.$emit('handle-back', 'reset')
    }
  }
}
</script>
